<template>
  <div class="top-rate-2">
    <div class="center-board-title">政法专项编制</div>
    <div id="rateEchart2"></div>
  </div>
</template>

<script>
export default {
  props: {
    depCode: {
      type: String
    },
    options: Array
  },
  data() {
    return {
      myEchart: null
    }
  },
  watch: {
    options(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const _this = this
      var colorList = [
        {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#fd666d' // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: '#FFDB5C' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#32C5E9' // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1890ff' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#1890ff' // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#eee' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#eee' // 100% 处的颜色
            }
          ]
        }
      ]
      const option = {
        legend: {
          show: false,
          orient: 'vertical',
          top: 'center',
          right: '25px',
          itemGap: 30,
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            silent: true, //禁止点击
            center: ['50%', '50%'],
            radius: ['60%', '75%'],
            startAngle: 225,
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  width: 1
                }
              }
            },
            label: {
              formatter: function (params) {
                if (params.dataIndex == 3) {
                  return null
                } else {
                  return params.name + '\n' + params.value
                }
              },
              padding: [0, -10],
              fontSize: 15,
              align: 'center',
              color: '#eee'
            },
            data: [
              {
                value:
                  this.options[2].GA_ZZ +
                  this.options[2].SF_ZZ +
                  this.options[2].FY_ZZ +
                  this.options[2].JCY_ZZ,
                name: '在编人数',
                itemStyle: {
                  normal: {
                    //颜色渐变
                    color: colorList[0]
                  }
                }
              },
              {
                value:
                  this.options[0].GA_BZ +
                  this.options[0].SF_BZ +
                  this.options[0].FY_BZ +
                  this.options[0].JCY_BZ -
                  this.options[2].GA_ZZ -
                  this.options[2].SF_ZZ -
                  this.options[2].FY_ZZ -
                  this.options[2].JCY_ZZ,
                name: '单位空编',
                itemStyle: {
                  normal: {
                    //颜色渐变
                    color: colorList[1]
                  }
                }
              },
              {
                value:
                  this.options[1].GA_DFP +
                  this.options[1].SF_DFP +
                  this.options[1].FY_DFP +
                  this.options[1].JCY_DFP,
                name: '待分配',
                itemStyle: {
                  normal: {
                    //颜色渐变
                    color: colorList[2]
                  }
                }
              },
              {
                value:
                  (this.options[0].GA_BZ +
                    this.options[0].SF_BZ +
                    this.options[0].FY_BZ +
                    this.options[0].JCY_BZ +
                    this.options[1].GA_DFP +
                    this.options[1].SF_DFP +
                    this.options[1].FY_DFP +
                    this.options[1].JCY_DFP) /
                  3,
                name: '',
                itemStyle: {
                  normal: {
                    //颜色渐变
                    color: 'rgba(80,150,224,0)'
                  }
                }
              } //底部缺口占1/4
            ]
          },
          {
            type: 'gauge',
            center: ['50%', '50%'],
            detail: {
              fontSize: 24,
              fontWeight: 'normal',
              formatter: '{value}%',
              color: '#fff'
            },
            axisLine: {
              show: true,
              color: '#fff',
              lineStyle: {
                width: 20,
                shadowBlur: 0,
                color: [
                  [
                    (this.options[2].GA_ZZ +
                      this.options[2].SF_ZZ +
                      this.options[2].FY_ZZ +
                      this.options[2].JCY_ZZ) /
                      (this.options[0].GA_BZ +
                        this.options[0].SF_BZ +
                        this.options[0].FY_BZ +
                        this.options[0].JCY_BZ +
                        this.options[1].GA_DFP +
                        this.options[1].SF_DFP +
                        this.options[1].FY_DFP +
                        this.options[1].JCY_DFP)
                  ],
                  [
                    (this.options[0].GA_BZ +
                      this.options[0].SF_BZ +
                      this.options[0].FY_BZ +
                      this.options[0].JCY_BZ) /
                      (this.options[0].GA_BZ +
                        this.options[0].SF_BZ +
                        this.options[0].FY_BZ +
                        this.options[0].JCY_BZ +
                        this.options[1].GA_DFP +
                        this.options[1].SF_DFP +
                        this.options[1].FY_DFP +
                        this.options[1].JCY_DFP)
                  ],
                  [1]
                ]
              }
            },
            axisLabel: {
              show: false,
              distance: 22,
              color: '#999',
              fontSize: 13
            },
            title: {
              show: true,
              textStyle: {
                fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
                color: '#ccc'
              }
            },
            data: [
              {
                value: (
                  ((this.options[2].GA_ZZ +
                    this.options[2].SF_ZZ +
                    this.options[2].FY_ZZ +
                    this.options[2].JCY_ZZ) /
                    (this.options[0].GA_BZ +
                      this.options[0].SF_BZ +
                      this.options[0].FY_BZ +
                      this.options[0].JCY_BZ +
                      this.options[1].GA_DFP +
                      this.options[1].SF_DFP +
                      this.options[1].FY_DFP +
                      this.options[1].JCY_DFP)) *
                  100
                ).toFixed(1),
                name: ''
              }
            ]
          }
        ]
      }
      this.myEchart = this.$echarts.init(document.getElementById('rateEchart2'))
      this.myEchart.setOption(option)
      window.addEventListener('resize', () => this.myEchart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
.top-rate-2 {
  width: calc(22% - 15px);
  margin-right: 15px;
  box-sizing: border-box;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    border-bottom: #336699 1px solid;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }
}
#rateEchart2 {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
